<template>
	<div ref="chartRef" id="rightdiv_scrollecharts" style="width: 100%; height: 170px"></div>
</template>
<script lang="js" setup>
	import * as echarts from 'echarts';
	import {ref, reactive, computed, unref, watchEffect, onMounted} from 'vue';

	const props = defineProps({
		echartsdata: {
			type: Array,
			default: () => [],
		},
	});
	watch(
		() => props.echartsdata,
		(val) => {
			console.log('echartsdata111', val);
			initCharts();
		},
		{
			deep: true,
		}
	);

	let myChart = ref(null);
	const m2R2Data = ref([
		// {value: 335, legendname: '最高温度异常', name: '最高温度异常  335', itemStyle: {color: '#ff9447'}},
		// {value: 310, legendname: '种类02', name: '种类02  310', itemStyle: {color: '#74a0fa'}},
		// {value: 234, legendname: '充电soc', name: '充电soc  234', itemStyle: {color: '#73deb4'}},
		// {value: 154, legendname: '种类04', name: '种类04  154', itemStyle: {color: '#9289e1'}},
		// {value: 335, legendname: '其他', name: '其他  335', itemStyle: {color: '#f7e35d'}},
	]);

	const option = reactive({
		tooltip: {
			trigger: 'item',
			formatter: function (parms) {
				var str = parms.seriesName + '</br>' + parms.marker + '' + parms.data.legendname + '</br>' + '数量：' + parms.data.value + '</br>' + '占比：' + parms.percent + '%';
				return str;
			},
		},

		legend: {
			type: 'scroll',
			orient: 'vertical',
			left: '50%',
			align: 'left',
			top: 'middle',
			textStyle: {
				color: '#8C8C8C',
			},
			height: 250,
		},
		series: [
			{
				name: '预警原因',
				type: 'pie',
				center: ['20%', '50%'],
				radius: ['40%', '65%'],
				clockwise: false, //饼图的扇区是否是顺时针排布
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: false,
						position: 'outter',
						formatter: function (parms) {
							return parms.data.legendname;
						},
					},
				},
				labelLine: {
					normal: {
						length: 5,
						length2: 3,
						smooth: true,
					},
				},
				data: m2R2Data.value,
			},
		],
	});
	function initCharts(params) {
		m2R2Data.vaule = [];
		props.echartsdata.forEach((item, index) => {
			m2R2Data.value.push({
				value: item.num,
				legendname: item.name,
				name: item.name,
			});
		});
		myChart = echarts.init(document.getElementById('rightdiv_scrollecharts'));
		myChart.setOption(option);
	}
	onMounted(() => {
		initCharts();
		window.addEventListener('resize', () => {
			myChart.resize();
		});
	});
</script>
